<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <input type="text" id="txt" placeholder="输入搜索内容">
  <button id="btn">搜索</button>
  <ul id="nav">

  </ul>
  <script>
    // str.match(正则)  根据正则规则匹配字符串  将匹配内容放到数组中 
    // 未匹配到 返回null
    // var reg = /a/gi
    // var str = "asdfsadfasdfasdfasdfdsadf";
    // console.log(str.match(reg))
    var list = ["男装", "男鞋", "男袜", "男裤", "女装", "童装", "女鞋", "女裤", "儿童裤", "童鞋"]

    function loadList(arr) {
      var nav = document.getElementById("nav");
      var str = ""
      for (var i = 0; i < arr.length; i++) {
        str += `<li>${arr[i]}</li>`
      }
      nav.innerHTML = str;
    }
    loadList(list)
    // 点击搜索
    var btn = document.getElementById("btn")
    btn.onclick = function () {
      // 根据输入的搜索文本 做正则
      var txtVal = document.getElementById("txt").value;
      var reg = new RegExp(txtVal, "g")
      console.log(reg)
      var newlist = [] //存储符合规则的数据的数组
      // 循环所有数据找到符合条件的数据
      for (var i = 0; i < list.length; i++) {
        console.log(list[i].match(reg))
        if (list[i].match(reg) != null) {
          newlist.push(list[i])
        }
      }
      console.log(newlist)
      loadList(newlist)
    }




  </script>
</body>

</html>